<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>轮回数据分析</a-breadcrumb-item>
      <a-breadcrumb-item>转世成功率</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">转世成功率分析</div>
        <div class="header-subtitle">阴曹地府 · 轮回成效监测</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card success-rate">
            <div class="stat-icon">
              <ReloadOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">总体成功率</div>
              <div class="stat-value">{{ overallSuccessRate }}%</div>
              <div class="stat-label">上升趋势</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card monthly-rate">
            <div class="stat-icon">
              <CalendarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">本月成功率</div>
              <div class="stat-value">{{ monthlySuccessRate }}%</div>
              <div class="stat-label">环比增长</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card total-cases">
            <div class="stat-icon">
              <FileTextOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">转世总数</div>
              <div class="stat-value">{{ totalCases }}</div>
              <div class="stat-label">累计</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card failure-rate">
            <div class="stat-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">失败率</div>
              <div class="stat-value">{{ failureRate }}%</div>
              <div class="stat-label">持续下降</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 成功率趋势分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="转世成功率趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="1">近1年</a-select-option>
                <a-select-option value="3">近3年</a-select-option>
                <a-select-option value="5">近5年</a-select-option>
                <a-select-option value="10">近10年</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="successTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 成功失败比例 -->
        <a-col :xs="24" :lg="12">
          <a-card title="转世结果分布" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="resultDistributionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 六道成功率对比 -->
        <a-col :xs="24">
          <a-card title="六道转世成功率对比" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="comparisonType" style="width: 120px">
                  <a-select-option value="success">成功率</a-select-option>
                  <a-select-option value="count">转世数量</a-select-option>
                  <a-select-option value="trend">增长趋势</a-select-option>
                </a-select>
                <a-button @click="exportSixRealmsData">
                  <DownloadOutlined />
                  导出
                </a-button>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="sixRealmsComparisonOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 影响因素分析 -->
        <a-col :xs="24" :lg="16">
          <a-card title="转世成功率影响因素" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="factorAnalysisOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 成功率分析报告 -->
        <a-col :xs="24" :lg="8">
          <a-card title="成功率分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>当前状况</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>总体成功率稳定</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>人道转世率最高</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator warning"></div>
                  <span>畜生道需关注</span>
                </div>
              </div>

              <div class="report-section">
                <h4>主要趋势</h4>
                <ul class="trend-list">
                  <li>成功率逐年提升</li>
                  <li>失败案例减少</li>
                  <li>审核效率优化</li>
                  <li>流程不断完善</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>改进建议</h4>
                <ul class="suggestion-list">
                  <li>加强前期评估</li>
                  <li>优化审核流程</li>
                  <li>完善监督机制</li>
                  <li>提升服务质量</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 月度成功率热力图 -->
        <a-col :xs="24">
          <a-card title="年度月份成功率热力图" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="heatmapYear" style="width: 100px">
                <a-select-option value="2024">2024年</a-select-option>
                <a-select-option value="2023">2023年</a-select-option>
                <a-select-option value="2022">2022年</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="heatmapOption" style="height: 300px" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <a-card title="转世成功率详细统计" :bordered="false">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索转世道路或时间" style="width: 200px" @search="handleSearch" />
            <a-button @click="exportData">
              <ExportOutlined />
              导出全部
            </a-button>
          </a-space>
        </template>
        <a-table :columns="tableColumns" :data-source="tableData" :pagination="tablePagination" :loading="tableLoading" :scroll="{ x: 1400 }" @change="handleTableChange" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined, CalendarOutlined, FileTextOutlined, ExclamationCircleOutlined, DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart, HeatmapChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, CalendarComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, PieChart, HeatmapChart, RadarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, CalendarComponent, VisualMapComponent])

// 响应式数据
const trendPeriod = ref('3')
const comparisonType = ref('success')
const heatmapYear = ref('2024')
const searchKeyword = ref('')
const tableLoading = ref(false)

// 核心指标数据
const overallSuccessRate = ref(87.3)
const monthlySuccessRate = ref(89.1)
const totalCases = ref('1,234,567')
const failureRate = ref(12.7)

// 表格配置
const tableColumns = reactive([
  {
    title: '转世道路',
    dataIndex: 'realm',
    key: 'realm',
    fixed: 'left',
    width: 120
  },
  {
    title: '成功率',
    dataIndex: 'successRate',
    key: 'successRate',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '转世总数',
    dataIndex: 'totalCount',
    key: 'totalCount',
    sorter: true
  },
  {
    title: '成功数量',
    dataIndex: 'successCount',
    key: 'successCount',
    sorter: true
  },
  {
    title: '失败数量',
    dataIndex: 'failureCount',
    key: 'failureCount',
    sorter: true
  },
  {
    title: '平均用时',
    dataIndex: 'avgTime',
    key: 'avgTime',
    sorter: true,
    render: (value) => `${value}天`
  },
  {
    title: '本月成功率',
    dataIndex: 'monthlyRate',
    key: 'monthlyRate',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '趋势',
    dataIndex: 'trend',
    key: 'trend',
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const icon = value > 0 ? '↗' : value < 0 ? '↘' : '→'
      return {
        children: `${icon} ${Math.abs(value)}%`,
        style: { color }
      }
    }
  }
])

const tableData = ref([])
const tablePagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 图表配置项
const successTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#6a7985' }
    }
  },
  legend: {
    data: ['总体成功率', '人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '总体成功率',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#52c41a', width: 3 },
      data: generateSuccessRateData()
    },
    {
      name: '人道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#1890ff', width: 2 },
      data: generateRealmData('human')
    },
    {
      name: '天道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#722ed1', width: 2 },
      data: generateRealmData('heaven')
    },
    {
      name: '阿修罗道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#fa8c16', width: 2 },
      data: generateRealmData('asura')
    },
    {
      name: '畜生道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#13c2c2', width: 2 },
      data: generateRealmData('animal')
    },
    {
      name: '饿鬼道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#eb2f96', width: 2 },
      data: generateRealmData('ghost')
    },
    {
      name: '地狱道',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#f5222d', width: 2 },
      data: generateRealmData('hell')
    }
  ]
}))

const resultDistributionOption = computed(() => ({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: { color: '#e6f7ff' }
  },
  series: [
    {
      name: '转世结果',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 87.3, name: '转世成功', itemStyle: { color: '#52c41a' } },
        { value: 8.2, name: '审核中', itemStyle: { color: '#1890ff' } },
        { value: 3.1, name: '需补充材料', itemStyle: { color: '#fa8c16' } },
        { value: 1.4, name: '转世失败', itemStyle: { color: '#ff4d4f' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}))

const sixRealmsComparisonOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['成功率', '转世数量'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '成功率(%)',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '转世数量',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '成功率',
      type: 'bar',
      data: [92.5, 89.3, 85.7, 78.2, 82.1, 75.9],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '转世数量',
      type: 'line',
      yAxisIndex: 1,
      data: [450000, 120000, 89000, 156000, 98000, 45000],
      lineStyle: { color: '#1890ff', width: 3 },
      itemStyle: { color: '#1890ff' }
    }
  ]
}))

const factorAnalysisOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['影响权重', '优化程度'],
    textStyle: { color: '#e6f7ff' }
  },
  xAxis: {
    type: 'category',
    data: ['业力评估', '前世功德', '转世意愿', '审核效率', '流程完善', '政策调整', '技术支持', '人员培训'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '权重/程度',
      min: 0,
      max: 100,
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    }
  ],
  series: [
    {
      name: '影响权重',
      type: 'bar',
      data: [30, 25, 20, 15, 12, 10, 8, 5],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '优化程度',
      type: 'line',
      data: [85, 78, 82, 90, 88, 75, 92, 87],
      lineStyle: { color: '#1890ff', width: 3 },
      itemStyle: { color: '#1890ff' }
    }
  ]
}))

const heatmapOption = computed(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const days = Array.from({ length: 31 }, (_, i) => `${i + 1}日`)
  const data = []

  months.forEach((month, monthIndex) => {
    days.forEach((day, dayIndex) => {
      if (
        (monthIndex === 1 && dayIndex >= 29) || // 2月
        ([3, 5, 8, 10].includes(monthIndex) && dayIndex >= 30)
      ) {
        // 30天的月份
        return
      }
      const rate = 75 + Math.random() * 20
      data.push([dayIndex, monthIndex, Math.round(rate * 10) / 10])
    })
  })

  return {
    tooltip: {
      position: 'top'
    },
    grid: {
      height: '50%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: days,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    yAxis: {
      type: 'category',
      data: months,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    visualMap: {
      min: 75,
      max: 95,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      inRange: {
        color: ['#52c41a', '#1890ff', '#722ed1']
      },
      textStyle: { color: '#e6f7ff' }
    },
    series: [
      {
        name: '成功率',
        type: 'heatmap',
        data: data,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 数据生成函数
function generateTimeData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  const currentYear = new Date().getFullYear()

  for (let i = years - 1; i >= 0; i--) {
    for (let month = 1; month <= 12; month++) {
      if (currentYear - i === new Date().getFullYear() && month > new Date().getMonth() + 1) break
      data.push(`${currentYear - i}年${month}月`)
    }
  }
  return data
}

function generateSuccessRateData() {
  const timeData = generateTimeData()
  const data = []
  let baseValue = 82

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 3
    data.push(Math.round(Math.max(75, Math.min(95, baseValue)) * 10) / 10)
  })
  return data
}

function generateRealmData(realm) {
  const timeData = generateTimeData()
  const data = []
  const baseValues = {
    human: 90,
    heaven: 86,
    asura: 82,
    animal: 76,
    ghost: 80,
    hell: 73
  }
  let baseValue = baseValues[realm]

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 4
    data.push(Math.round(Math.max(65, Math.min(95, baseValue)) * 10) / 10)
  })
  return data
}

// 生成表格数据
function generateTableData() {
  const realms = [
    { name: '人道', base: 92.5 },
    { name: '天道', base: 89.3 },
    { name: '阿修罗道', base: 85.7 },
    { name: '畜生道', base: 78.2 },
    { name: '饿鬼道', base: 82.1 },
    { name: '地狱道', base: 75.9 }
  ]

  return realms.map((realm, index) => {
    const totalCount = Math.floor(Math.random() * 400000 + 50000)
    const successCount = Math.floor((totalCount * realm.base) / 100)
    const failureCount = totalCount - successCount

    return {
      key: index,
      realm: realm.name,
      successRate: realm.base.toFixed(1),
      totalCount: totalCount.toLocaleString(),
      successCount: successCount.toLocaleString(),
      failureCount: failureCount.toLocaleString(),
      avgTime: (15 + Math.random() * 20).toFixed(1),
      monthlyRate: (realm.base + (Math.random() - 0.5) * 5).toFixed(1),
      trend: (Math.random() * 6 - 3).toFixed(1)
    }
  })
}

// 事件处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  tablePagination.current = pagination.current
  tablePagination.pageSize = pagination.pageSize

  if (sorter.field) {
    console.log('排序:', sorter)
  }
}

const exportSixRealmsData = () => {
  message.success('六道数据导出成功')
}

const exportData = () => {
  message.success('全部数据导出成功')
}

// 监听器
watch(trendPeriod, () => {
  // 空监听器保持响应性
})

watch(comparisonType, () => {
  // 空监听器保持响应性
})

watch(heatmapYear, () => {
  // 空监听器保持响应性
})

// 组件挂载
onMounted(async () => {
  try {
    tableData.value = generateTableData()
    tablePagination.total = tableData.value.length
  } catch (error) {
    message.error('数据加载失败')
  }
})
</script>

<style scoped>
/* 复用之前的样式 */
.statistics-page {
  min-height: 100vh;
  padding: 24px;
  color: #e6f7ff;
}

.page-breadcrumb {
  margin-bottom: 24px;
}

.page-breadcrumb .ant-breadcrumb-link {
  color: #91d5ff;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  border-radius: 16px;
}

.header-content {
  margin-bottom: 20px;
}

.ancient-title {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #40a9ff, #52c41a, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(64, 169, 255, 0.5);
}

.header-subtitle {
  font-size: 18px;
  color: #91d5ff;
  opacity: 0.8;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40a9ff, transparent);
}

.decoration-symbol {
  font-size: 24px;
  color: #40a9ff;
  text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid .ant-col {
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-card:hover::before {
  transform: translateX(100%);
}

.stat-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(64, 169, 255, 0.5);
}

.stat-icon {
  font-size: 32px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-rate .stat-icon {
  background: linear-gradient(45deg, #52c41a, #73d13d);
  color: white;
}

.monthly-rate .stat-icon {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: white;
}

.total-cases .stat-icon {
  background: linear-gradient(45deg, #722ed1, #9254de);
  color: white;
}

.failure-rate .stat-icon {
  background: linear-gradient(45deg, #fa8c16, #ffa940);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #91d5ff;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e6f7ff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #52c41a;
}

.main-content {
  margin-bottom: 32px;
}

.content-grid .ant-col {
  margin-bottom: 32px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.chart-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.chart-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

.echarts-container {
  padding: 16px;
}

.report-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  height: 400px;
}

.report-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.report-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
  height: calc(100% - 56px);
  overflow-y: auto;
}

.report-content {
  padding: 16px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #40a9ff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  border-left: 3px solid #40a9ff;
  padding-left: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e6f7ff;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.8);
}

.status-indicator.neutral {
  background: #1890ff;
  box-shadow: 0 0 6px rgba(24, 144, 255, 0.8);
}

.status-indicator.warning {
  background: #fa8c16;
  box-shadow: 0 0 6px rgba(250, 140, 22, 0.8);
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trend-list li,
.suggestion-list li {
  color: #e6f7ff;
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.trend-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #52c41a;
}

.suggestion-list li::before {
  content: '※';
  position: absolute;
  left: 0;
  color: #40a9ff;
}

.table-section {
  margin-top: 32px;
}

.table-section .ant-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.table-section .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-section .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.table-section .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(24, 144, 255, 0.1);
}

:deep(.ant-pagination) {
  text-align: center;
  margin-top: 24px;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #e6f7ff;
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  color: white;
}

@media (max-width: 768px) {
  .ancient-title {
    font-size: 32px;
  }

  .header-subtitle {
    font-size: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .echarts-container {
    padding: 8px;
  }
}
</style>
